<template>
  <a-drawer :title="`货箱`" width="70%" :visible="visible"
            hide-cancel
            @cancel="visible = false"
            :footer="false"
            v-if="visible">
    <ma-crud ref="crudRef" :columns="columns" :options="shipmentOptions" :scrollbar="true">
      <template #number="{ record }">
        <p color="blue" @click="">{{ record.parcel.number }}</p>
        <div class="overflow-hidden text-xs line-clamp-2">
          <p>{{record.parcel.ext_number}}</p>
          <a-link status="danger" v-if="record.work_order">
            <template #icon>
              <icon-stop/>
            </template>
            存疑
          </a-link>
          <a-link status="danger" v-if="record.work_order && record.work_order.intercept == 1">
            <template #icon>
              <icon-stop/>
            </template>
            拦截
          </a-link>
        </div>
      </template>
      <template #tableButtons>
        <a-button type="primary" v-if="changeStatus == 0" status="danger" @click="deleteParcel" v-auth="['document:waybill:delParcel']">
          <icon-delete/>
          移除
        </a-button>
        <a-button type="primary" v-if="changeStatus == 0" status="success" @click="PutParcel" v-auth="['document:shipmentWaybillParcel:PutParcel']">
          <icon-plus/>
          扫描装箱
        </a-button>
        <a-button type="primary" v-if="['2','4','5'].includes(changeStatus)" status="primary" @click="OutParcel" v-auth="['document:shipmentWaybillParcel:OutParcel']">
          <icon-close/>
          扫描出箱
        </a-button>
        <a-button type="primary" v-if="['0','3'].includes(changeStatus)" status="primary" @click="LoseParcel" v-auth="['document:shipmentWaybillParcel:PutParcel']">
          <icon-plus/>
          扫描差异装箱
        </a-button>
        <a-popconfirm v-if="changeStatus == 0"
            content="确定要封箱吗?"
            position="bottom"
            @ok="CloseParcel()"
        >
        <a-button type="primary" status="danger" v-auth="['document:shipmentWaybillParcel:CloseParcel']">
          封箱
        </a-button>
        </a-popconfirm>
      </template>
    </ma-crud>
    <batchActionModal :crud-ref="crudRef" :selected="selected" ref="batchDeleteActionRef"/>
  </a-drawer>
</template>
<script setup>

import {computed, inject, ref,reactive,h} from "vue";
import parcel from "@/api/document/parcel.js";
import waybill from "@/api/document/waybill.js";
import BatchActionModal from "@cps/actions/batchActionModal.vue";
import dictHelp from "@/utils/dicthelp.js";
import {Message} from "@arco-design/web-vue";
const crudRef = ref()
const parentCrudRef = inject('crudRef')
const getRecord = inject('getRecord')
const batchDeleteActionRef = ref()
const record = inject('record')
const changeStatus = ref(0)

const selected = computed(() => crudRef.value?.selecteds)
const visible = defineModel()
const shipmentOptions = ref({
  rowSelection: {showCheckedAll: true},
  showTools: true,
  pageLayout: 'fixed',
  // 默认统一设置列宽度
  columnWidth: 0,
  // tableLayoutFixed: true,
  pk: 'parcel_id',
  tabs:{
    dataIndex:'cancel',
    onChange:(value)=>{
      console.log(value)
      changeStatus.value = value
    }
  },
  api: parcel.getWaybillList,
  requestParams: {
    parcel:1,
    waybill_id: record.value.id,
  }
})

const columns = reactive([
  {
      title: "箱号",
      dataIndex: "number",
      formType: "input",
      search: true,

  },
  {
      title: "重量/尺寸",
      dataIndex: "parcel.actual_weight_size",
      formType: "input",
      customRender: ({record}) => {
          return record.parcel ? h('div', [
              h('span', record.parcel.actual_weight + 'KG'),
              h('br'),
              h('span', record.parcel.actual_length + '*' + record.parcel.actual_width + '*' + record.parcel.actual_height),
          ]) : '';
      },
  },
  {
      title: "当前货站",
      dataIndex: "parcel.depot_id",
      formType: "select",
      dict: dictHelp.depot
  },
  {
      title: "计划提单",
      dataIndex: "waybill_id",
      customRender: ({record}) => {
          return record ? ( [3,5].includes(record.cancel) ? record.waybill_id : record.out_waybill_id):'';
      },
  },
  {
      title: "发出提单",
      dataIndex: "out_waybill_id",
      customRender: ({record}) => {
        return record ? ( record.cancel == 4 ? record.waybill_id : record.out_waybill_id):'';
      },
  },
  {
        title: "状态",
        dataIndex: "parcel.status",
        formType: "select",
        dict: {
            name: "shipment_parcel_type",
            props: {
                label: "title",
                value: "key"
            },
            translation: true
        },
    },
  {
        title: "状态",
        dataIndex: "cancel",
        formType: "select",
        dict: {
            data:[
              {label:'计划装箱(未扫码)',value:0},
              {label:'已装箱(已扫码)',value:2},
              {label:'计划外装箱',value:4},
              {label:'封箱未装箱',value:3},
              {label:'封箱已装箱',value:5},
              {label:'已取消',value:1},
            ],
            translation: true
        },
        hide:true,
        search:true,
    },
])

const deleteParcel = () => {
  batchDeleteActionRef.value.open(
      {
        title: '移除', api: waybill.delParcel,
        displayDataIndex:'parcel_id',
         form: {
          key: 'parcel',
          id:'parcel_id',
          options: {
            layout: 'vertical'
          },
          form: {
            waybill_id: record.value.id,
          },
          columns: [],
          submited: async () => {
            parentCrudRef.value.refresh();
            await getRecord()
          }
        }
      },)
}

const PutParcel = () => {
  batchDeleteActionRef.value.open(
      {
        title: '扫描装箱', api: waybill.PutParcel,
        displayDataIndex:'parcel_id',
         form: {
          key: 'parcel',
          id:'parcel_id',
          options: {
            // layout: 'vertical'
          },
          form: {
            out_waybill_id: record.value.public_number,
            all:1
          },
          columns: [
            {
              dataIndex: 'all', title: '整单装车', formType: 'radio',
              dict:{
                data:[
                  {label:'是',value:1},
                  {label:'否',value:0},
                ]
              }
            }
          ],
          submited: async () => {
            parentCrudRef.value.refresh();
            await getRecord()
          }
        }
      },)
}

const LoseParcel = () => {
  batchDeleteActionRef.value.open(
      {
        title: '差异扫描装箱', api: waybill.PutParcel,
        displayDataIndex:'parcel_id',
         form: {
          key: 'parcel',
          id:'parcel_id',
          options: {
            // layout: 'vertical'
          },
          form: {
            all:0
            // waybill_id: record.value.id,
          },
          columns: [
            {
              dataIndex: 'out_waybill_id', title: '提单号', formType: 'input',
              rules: {required: true, message: "请输入提单号"},
            },
            {
              dataIndex: 'all', title: '剩余整单装车', formType: 'radio',
              dict:{
                data:[
                  {label:'是',value:1},
                  {label:'否',value:0},
                ]
              }
            }
          ],
          submited: async () => {
            parentCrudRef.value.refresh();
            await getRecord()
          }
        }
      },)
}
const OutParcel = () => {
  batchDeleteActionRef.value.open(
      {
        title: '扫描出箱', api: waybill.OutParcel,
        displayDataIndex:'parcel_id',
         form: {
          key: 'parcel',
          id:'parcel_id',
          options: {
            // layout: 'vertical'
          },
          form: {
         
          },
          columns: [

          ],
          submited: async () => {
            parentCrudRef.value.refresh();
            await getRecord()
          }
        }
      },)
}

const CloseParcel = async () => {
  let res = await waybill.CloseParcel({waybill_id: record.value.id})
  if(!res.success){
    return
  }
  crudRef.value.refresh()
  parentCrudRef.value.refresh();
  await getRecord()
}

</script>